<html>
<head>
<title>CSS Dropdown</title>

<style type="text/css">

	/* General */
	#cssdropdown, #cssdropdown ul { list-style: none; }
	#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
	
	/* Head links */
	#cssdropdown li.headlink
	{ 	
		float:left;
		margin-top: 1px;
		padding-bottom: 5px;
		padding-left: 30px;
		padding-right: 30px;
		padding-top: 5px;
		border: 1px solid #BBBBBB;
		background-color: #eef0ee;
		/*cursor: pointer;*/
		font-family: Verdana;
		font-size: 12px;
	
		border-radius: 5px 5px 0px 0px;
		-moz-border-radius: 5px 5px 0px 0px; /* Firefox 3.6 and earlier */
		-webkit-border-radius: 5px 5px 0px 0px; /* Safari */ 
	}
	
	#cssdropdown li.nolink 
	{ 	
		float:left;
		margin-top: 1px;
		padding-bottom: 5px;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 5px;
		border: 1px solid #BBBBBB;
		background-color: #eef0ee;
		/*cursor: pointer;*/
		font-family: Verdana;
		font-size: 12px;
	
		border-radius: 5px 5px 0px 0px;
		-moz-border-radius: 5px 5px 0px 0px; /* Firefox 3.6 and earlier */
		-webkit-border-radius: 5px 5px 0px 0px; /* Safari */ 
	}
	
	#cssdropdown li.headlink a { display: block;}
	#cssdropdown li.nolink a { display: block;}
	
	/*no links*/
	/*#cssdropdown li.nolink { width: 220px; float: left; margin-left: -1px; border: 1px black solid; background-color: #e9e9e9; text-align: center; }*/
	#cssdropdown li.nolink span { display: block; padding: 15px; }
	
	/* Child lists and links */
	#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
	#cssdropdown li.headlink:hover ul { display: block; }
	#cssdropdown li.headlink ul li a {  height: 17px; }
	#cssdropdown li.headlink ul li a:hover { background-color: #333; }
	
	
	/*#cssdropdown li.nolink ul { display: none; border-top: 1px black solid; text-align: left; }
	#cssdropdown li.nolink:hover ul { display: block; }
	#cssdropdown li.nolinkk ul li a { padding: 5px; height: 17px; }
	#cssdropdown li.nolink ul li a:hover { background-color: #333; }*/
	
	/* Pretty styling */
	body { font-family: verdana, arial, sans-serif; font-size: 0.8em; background-color: black; }
	#cssdropdown a { color: white; } #cssdropdown ul li a:hover { text-decoration: none; }
	#cssdropdown li.headlink { background-color: white; background-color: red; }
	#cssdropdown li.nolink { background-color: white; background-color: red; }
	/*#cssdropdown li.headlink ul { background-image: url(bg.gif); background-position: bottom; padding-bottom: 10px; }
	#cssdropdown li.nolink ul { background-image: url(bg.gif); background-position: bottom; padding-bottom: 10px; }*/
</style>

</head>

<body>
	<ul id="cssdropdown">

		<li class="headlink">

			<a href="http://google.com/">Search Engines</a>

			<ul>
				<li><a href="http://google.com/">Google</a></li>
				<li><a href="http://yahoo.com/">Yahoo</a></li>
				<li><a href="http://live.com/">Live Search</a></li>
			</ul>

		</li>
		<li class="headlink">
			<a href="http://shopping.com">Shopping</a>

			<ul>
				<li><a href="http://amazon.com/">Amazon</a></li>
				<li><a href="http://ebay.com/">eBay</a></li>
				<li><a href="http://craigslist.com/">CraigsList</a></li>

			</ul>
		</li>
		<li class="nolink">
			<a href="http://google.com/">FUUUUU</a>
		</li>

	</ul>

</body>
</html>